$toggle-control-width: 24px;
$toggle-control-height: 16px;
$toggle-control-knob-margin: 2px;
$toggle-control-knob-size: $toggle-control-height - $toggle-control-knob-margin -
  $toggle-control-knob-margin;

.toggle-control {
  -webkit-touch-callout: none;

  position: relative;
  display: inline-block;
  width: $toggle-control-width;
  height: $toggle-control-height;
  vertical-align: middle;
  overflow: hidden;

  &:focus-within {
    outline: $focus-outline;
  }

  input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* hide the checkbox */
    margin: 0;
    padding: 0;
    opacity: 0;
    border: none;
    background: none;
    appearance: none;
  }

  .toggle-control-layers {
    pointer-events: none;
  }

  .toggle-control-layers,
  .toggle-control-layer,
  .toggle-control-unchecked-color,
  .toggle-control-checked-color {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: $toggle-control-height * 0.5;
  }

  .toggle-control-unchecked-color {
    background: $studio-gray-10;
  }

  .toggle-control-checked-color {
    background: $studio-green-20;
    transition: $anim;
    opacity: 0;
  }

  .toggle-control-knob {
    display: block;
    width: $toggle-control-knob-size;
    height: $toggle-control-knob-size;
    background: white;
    border-radius: $toggle-control-height * 0.5;
    transform: translate(
      $toggle-control-knob-margin,
      $toggle-control-knob-margin
    );
    transition: $anim;
  }

  input:checked + .toggle-control-layers {
    .toggle-control-checked-color {
      opacity: 1;
    }

    .toggle-control-knob {
      transform: translate(
        $toggle-control-width - $toggle-control-knob-size -
          $toggle-control-knob-margin,
        $toggle-control-knob-margin
      );
    }
  }
}
